<template>
  <el-date-picker
    style="width: 100%;"
    v-model="dateValue"
    :type="type"
    :disabled="disabled"
    :range-separator="rangeSeparator"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :value-format="valueFormat"
    :picker-options="pickerOptions"
    @change="handleChangeDate"
  />
</template>
<script>
export default {
  props: {
    value: {
      type: Array | String,
      default: () => []
    },
    type: {
      type: String,
      default: 'daterange'
    },
    rangeSeparator: {
      type: String,
      default: '-'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    pickerOptions: {
      type: Object,
      default: () => ({
        disabledDate: time => time.getTime() < new Date().getTime() - 8.64e7 // 当前日期之前的不可选择
      })
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dateValue: this.value
    }
  },
  watch: {
    value (val) {
      this.dateValue = val
    }
  },
  methods: {
    handleChangeDate () {
      this.$emit('update:value', this.dateValue)
      this.$emit('change', this.dateValue)
    }
  }
}
</script>
